<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<head>
    <meta charset="UTF-8">
    <title>课程计划表</title>
    <style>
        /* 设置表格折叠边框，使两条相邻的边框合并为一条 */
        table {
            border-collapse: collapse;
            width: 600px;
            /* 可以根据需要调整宽度 */
            text-align: center;
            /* 文本水平居中对齐 */
            margin: 20px auto;
            /* 表格居中显示在页面中 */
            font-size: 14px;
            /* 可根据需要调整文字大小 */
        }

        /* th和td公共样式定义 */
        th,
        td {
            border: 1px solid #000;
            padding: 8px;
        }

        /* 设置标题行(含有表格总标题)背景色，可以根据需要修改 */
        th[colspan] {
            background-color: #f0f0f0;
            font-weight: bold;
            font-size: 16px;
        }

        /* 给"上课"、"休息"这样的表头行提供一定的背景色区分 */
        .header-group {
            background-color: #f9f9f9;
            font-weight: bold;
        }

        /* 左侧"课表"一栏可进行特殊样式，视需要而定 */
        .vertical-header {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <table>
        <!-- 第一行：表格总标题，跨越全部列（共8列：1列“课表”+5列工作日+2列周末） -->
        <tr>
            <th colspan="8">课程计划表</th>
        </tr>

        <!-- 第二行：
             第一列为“课表”设置rowspan=3，因为左侧这一栏将包含从顶部一直延伸到最底部的单元格
             第二列至第六列为“上课”，它需要占五列（星期一到星期五）
             第七列和第八列为“休息”，它需要占两列（星期六和星期日） -->
        <tr>
            <th rowspan="3" class="vertical-header">课表</th>
            <th colspan="5" class="header-group">上课</th>
            <th colspan="2" class="header-group">休息</th>
        </tr>

        <!-- 第三行：具体列头为星期一到星期日，其中星期一到星期五属于上课时间，星期六和星期日属于休息时间 -->
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>

        <!-- 第四行：对应每天的课程安排
             星期一到星期五都是“计算机”课程
             星期六是“复习”
             星期日是“休息” -->
        <tr>
            <td>计算机</td>
            <td>计算机</td>
            <td>计算机</td>
            <td>计算机</td>
            <td>计算机</td>
            <td>复习</td>
            <td>休息</td>
        </tr>
    </table>
</body>

</html>